import { UploadOutlined } from "@ant-design/icons";
import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormDatePicker, ProFormDateTimePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Avatar, Button, Card, Col, Descriptions, List, Row, Tabs, Timeline, Upload } from "antd";
import { useState } from "react";
import { history } from 'umi';

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [showCreator,setShowCreator] = useState(false);
  const [tabKey,setTabKey] = useState("1");
  const [showFollow,setShowFollow] = useState(false);

  const [fileList,setFileList] =useState<any>([]);

  const aColumn:ProColumns[] = [
    {
      title:'跟进方式',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'打电话'
    },
    {
      title:'跟进内容',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'线下拜访了客户'
    },
    {
      title:'跟进时间',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'2023-05-10'
    },
    {
      title:'下次联系时间',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'2023-05-12'
    },
  ]
  const bColumn:ProColumns[] = [
    {
      title:'姓名',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'张三'
    },
    {
      title:'手机',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'15115115123'
    },
    {
      title:'职务',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'采购部经理'
    },
    {
      title:'备注',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'首页联系人'
    },
  ]

  const cColumn:ProColumns[] = [
    {
      title:'商机名称',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'北京XXX医院采办'
    },
    {
      title:'商机金额',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'56,738.00'
    },
    {
      title:'客户名称',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'xxxxx人民医院'
    },
    {
      title:'商机阶段',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'方案/报价'
    },
  ]
  const eColumn:ProColumns[] = [
    {
      title:'期数',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'1'
    },
    {
      title:'客户名称',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'xxxxx人民医院'
    },
    {
      title:'合同编号',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'Qxxxx0001'
    },
    {
      title:'计划回款金额',
      dataIndex: 'date3',
      valueType:'money',
      width:120,
      renderText:()=>'33000'
    },
    {
      title:'计划回款日期',
      dataIndex: 'date4',
      width:120,
      renderText:()=>'2023-04-20'
    },
    {
      title:'计划回款方式',
      dataIndex: 'date3',
      width:120,
      renderText:()=>'网上转账'
    },
    {
      title:'回款状态',
      dataIndex: 'date4',
      width:120,
      renderText:()=>'已回款'
    },
  ]

  const fColumn:ProColumns[] = [
    {
      title:'报价编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'SO.202301020312001'
    },
    {
      title:'报价名称',
      dataIndex: 'name',
      ellipsis:true,
      width:200,
      renderText:()=>'人民医院第一次报价'
    },
    {
      title:'关联商机',
      dataIndex: 'name',
      ellipsis:true,
      width:200,
      renderText:()=>'SJ2001'
    },
    {
      title:'报价日期',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'2023-05-04'
    },
    {
      title:'报价状态',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'已生成合同'
    },
    
  ]

  const dColumn:ProColumns[] = [
    {
      title:'合同编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'SO.202301020312001'
    },
    {
      title:'客户名称',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'人民医院'
    },
    {
      title:'合同状态',
      dataIndex: 'name9',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'执行中',
        '2':'待签约',
        '3':'完毕',
      },
      renderText:()=>'执行中'
    },
    {
      title:'开始日期',
      dataIndex: 'date1',
      width:150,
      renderText:()=>'2023-01-01'
    },
    {
      title:'结束日期',
      dataIndex: 'date2',
      width:150,
      renderText:()=>'2023-08-01'
    },
    {
      title:'合同金额',
      dataIndex: 'price',
      ellipsis:true,
      valueType:'money',
      width:150,
      renderText:()=>'100000'
    },
  ]

  const columns:ProColumns[] = [
    {
      title:'客户名称',
      dataIndex: 'name',
      width:150,
      ellipsis:true,
      // renderText:()=>'上海XXXX人民医院'
    },
    {
      title:'客户来源',
      dataIndex: 'name1',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'展会',
        '2':'搜索引擎',
        '6':'客户介绍',
        '3':'电话咨询',
        '4':'广告',
        '5':'官网',
      },
      renderText:()=>'电话咨询'
    },
    {
      title:'联系电话',
      width:120,
      dataIndex: 'name2',
      renderText:()=>'13123456789'
    },
    {
      title:'客户行业',
      dataIndex: 'name3',
      width:100,
      renderText:()=>'医院'
    },
    {
      title:'关联线索',
      dataIndex: 'name31',
      width:100,
      ellipsis:true
    },
    {
      title:'关联机会',
      dataIndex: 'name32',
      width:100,
      ellipsis:true
    },
    {
      title:'客户级别',
      dataIndex: 'name4',
      valueType:'select',
      width:120,
      renderText:()=>'A(重点客户)',
      valueEnum:{
        'A(重点客户)':'A(重点客户)',
        'B(普通客户)':'B(普通客户)',
        'C(非优先客户)':'C(非优先客户)',
      },
    },
    {
      title:'成交状态',
      dataIndex: 'name5',
      valueType:'select',
      width:100,
      renderText:()=>'未成交',
      valueEnum:{
        '未成交':'未成交',
        '已成交':'已成交'
      },
    },
    {
      title:'累计拜访次数',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'3'
    },
    {
      title:'最近拜访日期',
      hideInSearch:true,
      width:100,
      dataIndex: 'name4',
      renderText:()=>'2023-05-10'
    },
    {
      title:'负责人',
      hideInSearch:true,
      width:100,
      dataIndex: 'name8',
      renderText:()=>'李四'
    },
    {
      title:'创建人',
      hideInSearch:true,
      width:100,
      dataIndex: 'name8',
      renderText:()=>'张三'
    },
    {
      title: "操作",
      valueType: 'option',
      width:100,
      render: (text, record:any,_, action) => [
       <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  const data = [
    {
      title: '王主任',
    },

  ];


  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
                    type='primary'
                    key='new'
                    onClick={() => {
                      setShowCreator(true)
                    }}
                    >新增
                    </Button>
      ]
        }
     dataSource={[
      {name:'上海交通大学医学院附属仁济医院',name31:'线索A',name32:'机会A',phone:'13123456789'},
      {name:'上海瑞金医院',name31:'线索B',name32:'机会B',phone:'13123456788'},
      {name:'上海交通大学医学院附属仁济医院',name31:'线索A',name32:'机会A',phone:'13123456786'},
      {name:'上海瑞金医院',name31:'线索B',name32:'机会B',phone:'13123456783'},
    
    ]}
      scroll={{x:1200}}
      columns={columns}
      rowKey="id"
      search={{span:7}}
      toolbar={{
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={'80%'} labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal" visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true,
          bodyStyle:{
            backgroundColor:'#f4f4f4'
          }
        }}>
           <Descriptions title="" column={3} size="small"  bordered>
                <Descriptions.Item label="客户名称">北京XXXX医院</Descriptions.Item>
                <Descriptions.Item label="客户界别">B(普通客户)</Descriptions.Item>
                <Descriptions.Item label="成交状态">未成交</Descriptions.Item>
                <Descriptions.Item label="负责人">李四</Descriptions.Item>
                <Descriptions.Item label="创建日期">2022-07-23</Descriptions.Item>
         </Descriptions>
         <div style={{height:20}}></div>
            <Tabs defaultActiveKey="1" activeKey={tabKey} onTabClick={(key)=>{
                setTabKey(key)
              }}  centered style={{backgroundColor:'#fff',padding:'0 20px 20px 20px'}}>
                    <TabPane tab="活动" key="1" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={aColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                    setShowFollow(true)
                                  }} >写跟进</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
                 <TabPane tab="基本信息" key="2" >
                 <div style={{height:20}}></div>
                 <Descriptions title="" column={3} size="small"  bordered>
                      <Descriptions.Item label="客户名称">北京XXXX医院</Descriptions.Item>
                      <Descriptions.Item label="手机">13123456789</Descriptions.Item>
                      <Descriptions.Item label="下次联系时间">2023-05-10</Descriptions.Item>
                      <Descriptions.Item label="成交状态">未成交</Descriptions.Item>
                      <Descriptions.Item label="地址">北京市xxx区XXXXX路xxxx号</Descriptions.Item>
                      <Descriptions.Item label="客户来源">电话咨询</Descriptions.Item>
                      <Descriptions.Item label="客户行业">医院</Descriptions.Item>
                      <Descriptions.Item label="客户界别">B(普通客户)</Descriptions.Item>
                      <Descriptions.Item label="负责人">李四</Descriptions.Item>
                      <Descriptions.Item label="备注" span={3}>无</Descriptions.Item>
              </Descriptions> 
            </TabPane>
            <TabPane tab="联系人" key="3" >
              <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={bColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                  }} >新增联系人</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
        
            </TabPane>

            <TabPane tab="商机" key="4" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={cColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                  }} >新增商机</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
            <TabPane tab="报价单" key="5" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={fColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                    history.push('/sale/ticket');
                                    setShowDetail(false)
                                  }} >新增报价单</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
           <TabPane tab="合同" key="6" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={dColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                  }} >新增合同</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
             <TabPane tab="回款" key="7" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={eColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                  }} >新增回款</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
            <TabPane tab="操作记录" key="8" >
            <div style={{height:20}}></div>
            <Timeline mode="alternate">
              <Timeline.Item label='04-18'>张三 新建了客户</Timeline.Item>
            </Timeline>
            </TabPane>
          </Tabs>
          <ModalForm
            title="跟进"
            width={500}
            labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"
            modalProps={{
              forceRender: true,
                destroyOnClose: true,
            }}
            visible={showFollow}
            onVisibleChange={(val)=>{
              setShowFollow(val)
            }}
            onFinish={async(value)=>{
              return true;
            }}
          >
              <ProFormSelect  name="recv_consignee" label="跟进方式" options={[{label:'打电话',value:'1'},{label:'会面',value:'2'}]}   width="md"/>
              <ProFormDatePicker  name="next" label="下次联系时间"   width="md"/>
              <ProFormTextArea name='content' label='跟进内容' width={'md'}></ProFormTextArea>
          </ModalForm>
      </DrawerForm>

      
      <DrawerForm title='详情' width={1200} visible={showCreator}  labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"  onVisibleChange={v=>{setShowCreator(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          
                <ProFormGroup>
                  <ProFormText name="name11" width={'md'} label="客户名称" rules={[{ required: true}]}/>
                  <ProFormText name="name5" width={'md'} label="联系电话"/>
                  <ProFormSelect name="name51" width={'md'} label="客户来源" options={[{label:'电话咨询',value:'0'},{label:'邮件咨询',value:'1'},{label:'客户介绍',value:'2'},{label:'广告',value:'3'},{label:'官网',value:'6'},{label:'展会',value:'7'}]}/>
                  <ProFormSelect name="name52" width={'md'} label="客户行业" options={[{label:'医院',value:'1'},{label:'商业服务',value:'2'},{label:'学会',value:'3'},{label:'卫健委',value:'3'}]}/>
                  <ProFormSelect name="name53" width={'md'} label="客户级别" options={[{label:'A(重点客户)',value:'0'},{label:'B(普通客户)',value:'1'},{label:'C(非优先客户)',value:'2'}]}/>
                  <ProFormSelect name="name511" width={'md'} label="关联线索" options={[{label:'线索A',value:'0'},{label:'线索B',value:'1'},{label:'线索C',value:'2'},{label:'线索D',value:'3'},{label:'线索E',value:'6'},{label:'线索F',value:'7'}]}/>
                  <ProFormSelect name="name512" width={'md'} label="关联机会" options={[{label:'机会A',value:'0'},{label:'机会B',value:'1'},{label:'机会C',value:'2'},{label:'机会D',value:'3'},{label:'机会E',value:'6'},{label:'机会F',value:'7'}]}/>

                  <ProFormDatePicker name="name1" width={'md'} label="下次联系时间" />
                  <ProFormSelect name="name54" width={'md'} label="负责人"/>
                  <ProFormText name="name2" width={'md'} label="客户地址"/>
                </ProFormGroup>
         
                <ProFormTextArea name="name111" width={'md'} label="备注" />

        
      </DrawerForm>


    </PageContainer>)
}